<template>
  <div v-if="tips || (remark && remark.length)" class="cursor-pointer">
    <q-icon name="iconfont icontubiao-72" class="font-18" @click="showRemark" style="margin-top: -3px;color: #999"/>
    <q-tooltip max-width="300px" v-if="tips">{{tips}}</q-tooltip>
    <drawer
      title="说明"
      :visible.sync="dialogVisible"
      width="500px"
      close-on-click-modal>
      <div>
        <div v-for="(item, index) in remark" :key="index" class="margin-b-10" style="line-height: 1.5"><span v-show="showIndex">{{ index + 1 }}. </span>{{item}}</div>
      </div>
    </drawer>
  </div>
</template>

<script>
import Drawer from '../../../drawer/drawer'

export default {
  name: 'tips',
  components: {
    Drawer
  },
  props: {
    tips: {
      type: String,
      default: ''
    },
    remark: {
      type: Array,
      default: null
    },
    showIndex: {
      type: Boolean,
      default: false
    },
    loading: Boolean // loading遮罩
  },
  data () {
    return {
      dialogVisible: false
    }
  },
  methods: {
    showRemark () {
      this.remark !== null && (this.dialogVisible = true)
    }
  }
}
</script>

<style scoped>

</style>
